<template>
	<view class="n-file-content">
		<view v-if="files.length === 0">
			<text class="no-data">无</text>
		</view>
		<view v-else class="file-list" v-for="item in files" :key="item.file_id"  style="100%">
			<image class="file-img" :src="getIcon(item)" @click="show(item)"></image>
			<view class="file-content">
				<view class="file-name" >
					<text  @click="show(item)">{{item.file_name}}</text>
				</view>
				
				<text class="file-size" v-if="item.file_size">{{getFileSize(item)}}KB</text>
			</view>
			<view class="file-delete">
				<button @click="onDelete(item)" v-if="hasdeleted">删除</button>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import { file } from '@/utils/common.js'	
	
	export default {
		props: {
			files: {
				type: Array,
				default() {
					return []
				}
			},
			hasdeleted: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			getIcon(item) {
				if(file.checkIsImg(item)){
					return '/static/icon/image-ico.png'
				}else if(file.checkIsAudio(item)){
					return '/static/icon/audio.png'
				}else if(item.ext === 'txt'){
					return '/static/icon/txt-ico.png'
				}else if(item.ext === 'pdf'){
					return '/static/icon/pdf-ico.png'
				}else if(item.ext === 'docx' || item.ext === 'doc'){
					return '/static/icon/word-ico.png'
				}else{
					return '/static/icon/attachment.png'
				}
			},
			getFileSize(item) {
				return file.getFileSize(item)
			},
			onDelete(item) {
				const _this = this
				uni.showModal({
				    title: '提示',
				    content: '确定要删除该文件吗？',
				    success: function (res) {
				        if (res.confirm) {
							const { files } = _this
							for(let i =0;i<files.length;i++) {
								if(files[i].file_id === item.file_id) {
									files.splice(i, 1)
								}
							}
							_this.$emit('delete', item)
						}
					}
				})
			},
			show(item) {
				this.$showOrDownLoad(item.file_id, item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no-data {
		color: #999;
	}
	
	.file-list {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		width: 100%;
		
		.file-img { 
			height: 70rpx;
			width: 80rpx;
		}
		
		.file-name {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.file-delete {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				background-color: $uni-color-primary;
				color: #ffffff;
			}
		}
		
		.file-content { 
			width: 70%;	
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			
			.file-size {
				color: $uni-text-color-grey;
			}
		}
		
		.file-delete {
			width: 20%;
		}
	}
	
	file-list {
		width: 100%;
	}
	.n-file-content {
		width: 100%;
	}
	
	uni-button {
	    display: inline-block;
	    line-height: 2.3;
	    font-size: 13px;
	    padding: 0 1.34em;
	}
</style>
